<template>
  <div class="_input" :style="defineWrap">
    <div class="label" :style="borderBot ? 'border-bottom: 1px solid #E3DEDE;' : ''">
      <div class="label_text" v-if="label.length > 0" :style="defineLabel">
        {{label}}
        <span class="mainColor" v-if="required">*</span>
      </div>
      <input
        class="input"
        :type="type"
        :style="defineStyle"
        :disabled="disabled"
        v-model="value"
        v-on:input="onChange"
        :placeholder="placeholder"
        :maxlength="maxlength" 
      />
      <div class="code" v-if="type === 'code'">
        <van-button size="small" type="primary" class="mainColor" @click="sendCode" v-if="!sendSuc">获取验证码</van-button>
        <van-button size="small" type="primary" disabled v-else class="disable">{{time}}s后重新获取</van-button>
      </div>
      <template v-if="useSlot">
        <div class="code">
          <slot></slot>
        </div>
      </template>
    </div>
    <div 
      class="err" 
      v-show="showErrMsg"
    >
      <div :style="defineLabel"></div>
      {{errMsg}}
    </div>
  </div>
</template>

<script>
import { Button } from 'vant'
export default {
  props: {
    defineWrap: {
      type: String,
      default: ''
    },
    sendSuc: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: 'text'
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    label: {
      type: String,
      default: ''
    },
    required: {
      type: Boolean,
      default: false
    },
    errMsg: {
      type: String,
      default: ''
    },
    maxlength: {
      type: String,
      default: ''
    },
    borderBot: {
      type: Boolean,
      default: true
    },
    checked: { // 是否开启正则校验
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    defaultVal: {
      type: String,
      default: ''
    },
    defineStyle: {// 自定义样式
      type: String,
      default: ""
    },
    defineLabel: {// 自定义label样式
      type: String,
      default: ''
    },
    useSlot: { // 右侧按钮插槽
      type: Boolean,
      default: false
    }
  },
  watch: {
    type(newV, oldV) {
      if (this.type === 'code' || this.type === 'blank' || this.type === 'invitation') {
        this.type = 'number'
      } else if (this.type === 'card') {
        this.type = 'tel'
      }
    },
    sendSuc(newV, oldV) {
      if (newV) {
        this.countDown()
      }
    },
    defaultVal(newV, oldV) {
      this.value = newV
    }
  },
  data() {
    return {
      rule: {
        tel: /^[1][3,4,5,7,8,9][0-9]{9}$/,
        code: /\d{6}/,
        password: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
        card: /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/, // 身份证校验
        email: /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/, // 邮箱地址校验
        blank: /^([1-9]{1})(\d{15}|\d{18})$/, //校验银行卡卡号
        invitation: /\d{6}/
      },
      time: 60,
      timer: null,
      showErrMsg: false,
      value: ''
    }
  },
  created() {
    this.value = this.defaultVal
    this.showErrMsg = this.value.length ? !this.rule[this.type].test(this.value) : false
    this.$emit('change', {value: this.value, isSuccess: this.value.length ? this.rule[this.type].test(this.value) : false})
    
  },
  components: {
    [Button.name]: Button
  },
  methods: {
    onChange(event) {
      let e = event.target.value
      let define = this.rule[this.type] ? this.rule[this.type] : undefined
      let flag = define ? define.test(e) : false
      // 是否匹配校验，不匹配时根据长度进行匹配
      this.$emit('change', {value: e, isSuccess: define ? flag : (e.length > 0 ? true : false)})
      if (!define || !this.checked) return
      if (flag || !e.length) {
        this.showErrMsg = false
      } else {
        this.showErrMsg = true
      }
    },
    // 发送验证码
    sendCode() {
      this.$emit('sendc', {})
    },
    // 定时器
    countDown() {
      this.timer = setInterval(() => {
        this.time = this.time - 1
        if (this.time === 0) {
          clearInterval(this.timer)
          this.$emit('changcode:status', {value: false})
          this.time = 60
        }
      }, 1000)
    },
  }
}
</script>

<style lang="scss" scoped>
  ._input {
    width: 100%;
    .label {
      height: 50px;
      position: relative;
      padding-bottom: 2px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      .label_text {
        height: 100%;
        width: 70px;
        display: flex;
        align-items: center;
        color: #333;
        font-size: 14px;
      }
      .input {
        flex: 1;
        border: none;
      }
      .code {
        position: absolute;
        right: 0px;
        top: 0px;
        bottom: 0px;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .err {
      margin-top: 5px;
      text-align: left;
      font-size: 12px;
      color:#DC143C;
      display: flex;
    }
  }
</style>
<style lang="scss">
  ._input {
    .van-cell {
      padding-left: 0px;
    }
    .van-field__label {
      width: 60px;
    }
    .van-field__button {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      display: flex;
      align-items: center;
    }
    .van-button {
      border: none;
      background: #fff;
      padding: 0px;
      font-size: 14px;
    }
    .disable {
      color: #999;
    }
    input::placeholder {
      color: #5F6475;
      opacity: 0.45;
    }
  }
</style>